<template>
    <div class="layout">
        <el-container>
            <el-aside>
                <div class="p15 cp"><el-image @click="router.push({name:'public'})" src="https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/index-logo.png"></el-image></div>
                <el-menu style="border-right:none" default-active="admin" unique-opened @open="handleOpen" @close="handleClose"  background-color="#3d6abf" text-color="#FFF" active-text-color="#FFF">
                    <div v-for="item in menu" :key="item.name">
                        <el-menu-item v-if="!item.meta.is_more" index="admin" @click="onLink(item)">
                            <span style="color: #FFF;font-size: 1.4rem;">{{ item.meta.side_name }}</span>
                        </el-menu-item>
                        <el-sub-menu v-else="item.meta.is_more" :index="item.name" >
                            <template #title>
                                <span style="color: #FFF;font-size: 1.4rem;">{{ item.meta.side_name }}</span>
                            </template>
                            <div v-for="e in item.children" :key="e.name" >
                                <el-menu-item v-if="!e.meta.is_more" :index="e.name" @click="onLink(e)">
                                    <span style="color: #FFF;font-size: 1.2rem;">{{ e.meta.side_name }}</span>
                                </el-menu-item>
                                <el-sub-menu v-if="e.meta.is_more" :index="e.name" :disabled="e.name == 'adjusts'">
                                    <template #title><el-text tag="b" style="color: #FFF;">{{ e.meta.side_name }}</el-text></template>
                                    <div v-for="l in e.children" :key="l.name">
                                        <el-menu-item @click="onLink(l)" :index="l.name" v-if="l.meta.is_show" :disabled="item.disabled"  >
                                            <span style="color: #FFF;">{{ l.meta.side_name }}</span>
                                        </el-menu-item>
                                    </div>
                                </el-sub-menu>
                            </div>
                        </el-sub-menu>
                    </div>
                </el-menu>
            </el-aside>
            <div class="el-aside-r"></div>
            <el-container>
                <el-header class="header">
                    <el-row :gutter="20">
                        <el-col :span="4"></el-col>
                        <el-col :span="16" class="text-center"><el-text @click="onLinkProject" size="large" tag="b" class="cp project_title">{{ project ? project.title : '未选择项目' }}</el-text></el-col>
                        <el-col :span="4" class="text-right">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <el-avatar style="margin-top: 8px;cursor: pointer;" :src="user.avatar" />
                                    <el-text style="padding:0px 16px 0px 8px;position: relative;top: -14px;">{{ user.name }}</el-text>
                                <el-badge :show-zero="false" :value="waitTotal" class="item" :offset="[-10, -20]"><el-icon @click="router.push({ name: 'approve'})" style="padding:0px 16px 0px 8px;position: relative;top: -14px;cursor: pointer;" size="20"><el-icon><More /></el-icon></el-icon></el-badge>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="onLogout">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main style="padding: 16px;background-color: #FFFFFF;">
                    <router-view v-slot="{ Component }">
                            <transition name="slide-fade" mode="out-in">
                                <div :key="$route.path">  
                                    <component :is="Component"></component>
                                </div>
                            </transition>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { More } from '@element-plus/icons-vue'
import { ref,onMounted, computed } from 'vue'
import router from '../../router';
import useStore from '../../store/index'
import http from '../../util/request';
const useStores = useStore()
let project = computed(() => useStores.project)

let waitTotal = ref(0)

let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)

const segmented = ref('')
if(!sessionStorage.getItem('token')){
    router.push({ name: 'adminLogin'})
}
const onMenuTab = (data:any,type:number) => {
    if(type == 0){
        segmented.value = data.label
        // menuTab.value.push({name: data.name,value: data.meta.side_name,label: data.meta.side_name})
        return
    }
    let is:boolean = true
    menuTab.value.forEach((e:any) => {
        if(data.name == e.name){
            is = false
        }
    });
    if(is){
        menuTab.value.push({name: data.name,value: data.meta.side_name,label: data.meta.side_name})
    }
    segmented.value = data.meta.side_name
}

interface menuTab {
    name: string
    value: string
    label: string
}
let menuTab = ref<menuTab[]>([]) 
let routerList:any = router.options.routes[0].children
let menu:any = ref([])
let roleAuth:any = user.auths ? JSON.parse(user.auths.auth) : []
routerList.forEach((e:any)=>{
    if(e.children){
        e.children = e.children.filter((item:any) => item.meta.is_show == true )
    }

})
// onMenuTab(menu.value[0],0)

const onMenuTop = (index:number) => {
    // if(index != 1){
    //     return
    // }
    console.log(index)
    menu.value = []
    routerList.forEach((e:any)=>{
        
        if(e.children){
            e.children = e.children.filter((item:any) => item.meta.is_show == true )
        }
        if(e.children){
            e.children.forEach((element:any) => {
                element.effect = 'dark'
            });
        }
        
        // if(user.id > 1){
        //     if(mapRouter(e)){
        //         menu.value.push(mapRouter(e))
        //     }
        // }

        if(user.id > 1){
            menu.value.push(mapRouter(e))
        }
        if(user.id == 1){
            menu.value.push(e)
        }
        
    })
}

const mapRouter = (rdata:any) => {
    rdata.disabled = (roleAuth.indexOf(rdata.name) != -1) ? false : true
    // rdata.children.forEach((element:any) => {
    //     if(element.children){
    //         mapRouter(element)
    //     }
    // });
    return rdata
    // if(roleAuth.indexOf(rdata.name) >= 0){
    //     rdata.children.forEach((element:any) => {
    //         if(element.children){
    //             mapRouter(element)
    //         }
    //     });
    //     return rdata
    // }else{
    //     return false
    // }
    
}

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const onLink = (data:any) => {
    onMenuTab(data,1)
    router.push({ name: data.name})
}

const onLinkProject = () => {
    router.push({ name: 'project'})
}

const onLogout = () => {
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('project')
    router.push({ name: 'index'})
}

const onWait = () => {
    http.post('/approve/wait',{}).then((response:any)=>{
        waitTotal.value = response.data.total
    })
}

onMounted(()=>{
    onWait()
    onMenuTop(0)

})
</script>

<style scoped>
.el-container{background-color: #FFFFFF;}
.header{width: 100%;background-color: #FFF;height: 54px;border-bottom: .5px solid #EEEEEE;line-height: 27px;}
.example-showcase .el-dropdown-link { cursor: pointer; color: var(--el-color-primary); display: flex; align-items: center; }
.project_title{font-size: 1.2rem !important;top: 12px !important;position: relative;}
.project-title{text-align: center;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;height: 40px;line-height: 40px;}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
.el-menu--horizontal {
  --el-menu-horizontal-height: 35px;
}
.menuBtn{padding: 8px;color: #FFF;}
.el-aside{
    background: #3d6abf;
    margin: 0px 0 0px 0px;
    height: calc(100vh);
    box-shadow: var(--el-box-shadow-light);
    overflow-y: auto;
    transition: width .3s ease;
    width: 240px;
}
.el-aside-r{background-color: #5ca6eb;height: 100vh;position: relative;width: 8px;right: 3px;}
.main-card{height: calc(100vh - 80px);margin-top: 3px;}
.grid{display: grid;grid-template-columns: auto 380px;line-height: 36px;}
</style>